<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base th:href="${#servletContext.getContextPath()+'/'}">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap-theme.min.css"
          integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            crossorigin="anonymous"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <script>
        $(function () {
            //绑定删除按钮的点击事件
            $('#batchDelete').click(function () {
                alert("看看触发了没")
                // 获取选中的checkbox的value
                var checkboxValues = new Array();
                $('input[name="ids"]:checked').each(function (){
                    checkboxValues.push($(this).val());
                });
                var s = JSON.stringify(checkboxValues);
                // 发送ajax请求到后端
                $.ajax({
                    type: 'POST',
                    url: "emp/deleteBench",
                    data: s,
                    // dataType:"json",
                    contentType: "application/json",
                    success: function (data) {
                        alert("请求成功");
                        alert(data)
                        location.reload()
                        return data;
                    },
                    error: function () {
                        alert(checkboxValues)
                        alert('请求出错');
                    }
                });
            });
        })
    </script>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <button type="button" class="btn btn-default btn-lg active">
                <a href="emp/addEmp.html" th:href="@{'emp/deptMsg'}">添加员工</a>
            </button>
            <button type="button" id="batchDelete" class="btn btn-default btn-lg active">
                    批量删除
            </button>
            <table border="1" class="table table-striped">
                <tr>
                    <th>员工编号</th>
                    <th>员工姓名</th>
                    <th>员工性别</th>
                    <th>员工薪资</th>
                    <th>部门名称</th>
                    <th>员工生日</th>
                    <th><input type="checkbox" id="checkAll">全选</th>
                    <th>操作</th>
                </tr>

                <tr th:each="emp:${empList}">
                    <td th:text="${emp.eno}"/>
                    <td th:text="${emp.ename}"/>
                    <td th:text="${emp.esex}"/>
                    <td th:text="${emp.salary}"/>
                    <td th:text="${emp.dno==emp.deptObj.dno?emp.deptObj.dname:'没有部门'}"/>
                    <th th:text="${emp.bornDate}"/>
                    <td>
                        <input type="checkbox" name="ids" class="btn btn-default" th:value="${emp.eno}"/>
                    </td>
                    <td>
                        <button type="button" class="btn btn-default"><a
                                th:href="@{'emp/updateEmp'(eno=${emp.eno})}">编辑</a></button>
                        <button type="button" class="btn btn-default"><a
                                th:href="${'emp/deleteEmp?eno='+emp.eno}">删除</a></button>
                    </td>
                </tr>

            </table>
        </div>
    </div>
</div>
<div class="center-block">
    <div class="row">
        <div class="col-md-2 col-md-offset-5">
            <button type="button" class="btn btn-default btn-lg active"><a href="/user/login">返回首页</a></button>
        </div>
    </div>
</div>

<script>
    // 全选或取消
    $('#checkAll').change(function () {
        $('input[name="ids"]').prop('checked', this.checked);
    });
    // 某个复选框取消选中，则取消全选
    $('input[name="ids"]').change(function () {
        var length = $('input[name="ids"]').length;
        var checkedLength = $('input[name="ids"]:checked').length;
        $('#checkAll').prop('checked', length == checkedLength);
    });
</script>
</body>
</html>